<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>DOM操作之menu练习</title>
		<style type="text/css">
			.tabs{
				list-style: none;
				padding: 0;
			}
			
			.tabs a{
				text-decoration: none;
				color: #000;
				padding: 5px 10px;
				display: inline-block;
			}
			
			.tabs>li{
				float: left;
				border-bottom: 1px solid #000;
			}
			
			
			.tabs>.active{
				border: 1px solid #000;
				border-bottom: 0;
			}
		</style>
		
		<script src="js/jquery-1.12.4.js"  type="text/javascript"></script>
	</head>
	<body>
		
			<ul class="tabs">
				<li class="active"><a data-toggle="tab" href="#">菜单一</a></li>
				<li><a data-toggle="tab" href="#">菜单二</a></li>
				<li><a data-toggle="tab" href="#">菜单三</a></li>
				<li><a data-toggle="tab" href="#">菜单四</a></li>
				<li><a data-toggle="tab" href="#">菜单五</a></li>
				<li><a data-toggle="tab" href="#">菜单六</a></li>
				<li><a data-toggle="tab" href="#">菜单七</a></li>
			</ul>
		
		
		
		<script type="text/javascript">
			//给a标签绑定单击事件
			// 当父元素没有active, 添加active
			// 然后,把父元素以外的其他元素的active去掉
			$(function(){
				$('a[data-toggle=tab]').click(function(e){
					var $li = $(e.target).parent();
					
					if(!$li.hasClass('active')){
						$li.addClass('active')
							.siblings('.active').removeClass('active');
					}
				});
			});
		</script>
	</body>
</html>
